@import '../../../../common/scss/variable.scss';

.comp-renewal-modal {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  .renewal_modal {
    padding: $gap-default;
    position: relative;
    font-size: $font-size-xl;
    width: 351px;
    background: linear-gradient(180deg, #ffecdb 0%, #ffffff 100%);
    border-radius: 10px;
    h2 {
      position: relative;
      font-size: 18px;
      line-height: 18px;
      padding-left: 10px;
      color: #333;
      &::before {
        position: absolute;
        display: block;
        content: '';
        left: 0;
        top: 0;
        width: 3.5px;
        height: 18px;
        background: linear-gradient(180deg, #fdba30 0%, #fc8f2b 100%);
        border-radius: 1.5px;
      }
    }

    .body {
      @include flex(column);
      align-items: flex-start;
      margin: $gap-default 0;
      text-align: left;
      font-size: 13px;
      color: #333;
      line-height: 20px
    }

    .btn {
      @include flex;
      height: 38px;
      background: linear-gradient(270deg, #fc8d2b 0%, #fdbc2f 100%);
      border-radius: 10px;
      font-size: 13px;
      color: #fff;
      font-weight: 500;
    }
  }
}
